<style lang="scss" scoped>
  .padcenterdelivery{
    width: 39vw;
    margin-top: 0.52vw;
    .title{
      font-size: 0.833vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #00D1E3;
      opacity: 1;
      margin-bottom: 0.625vw;
    }
    .d_lis{
      margin-top: 0.52vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .li{
        width: 19.53vw;
        .head{
          display: flex;
          justify-content: center;
          align-items: center;
          .h{
            margin-right: 1.04vw;
            font-size: 0.573vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .block {
              width: 0.885vw;
              height: 0.468vw;
              background: #18914D;
              opacity: 1;
              margin-right: 0.52vw;
            }
            .block2{
              background-color: #147B9C;
            }
            .block3{
              background-color: #D3B31F;
            }
            .block4{
              background-color: #9F3C00;
            }
          }
        }
      }
    }

  }
</style>
<template>
  <div class="padcenterdelivery bot_s">
    <div class="title">垃圾投递量</div>
    <div class="d_lis">
      <div class="li">
        <div class="head">
          <div class="h"><span class="block block1"></span>厨余垃圾</div>
          <div class="h"><span class="block block2"></span>可回收</div>
          <div class="h"><span class="block block3"></span>其他</div>
          <div class="h"><span class="block block4"></span>有害</div>
        </div>
        <bar  :commonEchartsObj="countDeliverRecord"></bar>
      </div>
      <div class="li">
        <div class="head">
          <div class="h"><span class="block block1"></span>厨余垃圾</div>
          <div class="h"><span class="block block2"></span>可回收</div>
          <div class="h"><span class="block block3"></span>其他</div>
          <div class="h"><span class="block block4"></span>有害</div>
        </div>
        <bar  :commonEchartsObj="countDeliverRecord2"></bar>
      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import {getDeliverGarbageMonthWeight,getDeliverGarbageRegionWeight} from "@/api/screem";
import bar from './bar.vue'

export default {
  name: "padcenterdelivery",
  data() {
    return {
      initTimer: null,
      countDeliverRecord: {
        echarts_name: `bar1`,
        line_list: [],
        line_date: [],
        num: 5
      },
      countDeliverRecord2: {
        echarts_name: `bar2`,
        line_list: [],
        line_date: [],
        num: 3
      },
    };
  },
  created() {
   this.init()
  },
  mounted() {
  },
  props: [''],
  components: {bar},
  methods: {
    init() {
      getDeliverGarbageMonthWeight()
        .then(res => {
          let arr1 = [], arr2 = [],arr3 = [], arr4 = [];
          this.countDeliverRecord.line_date = [];
          (res.data || []).forEach(item => {
            this.countDeliverRecord.line_date.push(item.horizontalOrdinate + '月')
            arr1.push(item.kitchenWaste)
            arr2.push(item.recyclable)
            arr3.push(item.other)
            arr4.push(item.harmful)
          });
          var series = [
            {
              name: '厨余垃圾',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                // position: 'insideRight'
              },
              barWidth: 10,
              colorClass: '#18914D',
              itemStyle: {
                color: '#18914D',
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              data: arr1
            },
            {
              name: '可回收垃圾',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                // position: 'insideRight'
              },
              colorClass: '#147B9C',
              itemStyle: {
                color: '#147B9C',
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              data: arr2
            },
            {
              name: '其他垃圾',
              type: 'bar',
              stack: '总量',
              colorClass: '#D3B31F',
              label: {
                show: false,
                // position: 'insideRight'
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              itemStyle: {
                color: '#D3B31F',
              },
              data: arr3
            },
            {
              name: '有害垃圾',
              type: 'bar',
              stack: '总量',
              colorClass: '#9F3C00',
              label: {
                show: false,
                // position: 'insideRight'
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              itemStyle: {
                color: '#9F3C00',
              },
              data: arr4
            },
          ]

          this.$set(this.countDeliverRecord, 'line_list', series);
        })
      getDeliverGarbageRegionWeight()
        .then(res => {
          let arr1 = [], arr2 = [],arr3 = [], arr4 = [];
          this.countDeliverRecord2.line_date = [];
          (res.data || []).forEach(item => {
            this.countDeliverRecord2.line_date.push(item.horizontalOrdinate)
            arr1.push(item.kitchenWaste)
            arr2.push(item.recyclable)
            arr3.push(item.other)
            arr4.push(item.harmful)
          });
          var series = [
            {
              name: '厨余垃圾',
              type: 'bar',
              stack: '总量',
              colorClass: '#18914D',
              label: {
                show: false,
                // position: 'insideRight'
              },
              barWidth: 10,
              itemStyle: {
                color: '#18914D',
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              data: arr1
            },
            {
              name: '可回收垃圾',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                // position: 'insideRight'
              },
              colorClass: '#147B9C',
              itemStyle: {
                color: '#147B9C',
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              data: arr2
            },
            {
              name: '其他垃圾',
              type: 'bar',
              stack: '总量',
              colorClass: '#D3B31F',
              label: {
                show: false,
                // position: 'insideRight'
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              itemStyle: {
                color: '#D3B31F',
              },
              data: arr3
            },
            {
              name: '有害垃圾',
              type: 'bar',
              stack: '总量',
              colorClass: '#9F3C00',
              label: {
                show: false,
                // position: 'insideRight'
                formatter: function(params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return ' ';
                  }
                }
              },
              itemStyle: {
                color: '#9F3C00',
              },
              data: arr4
            },
          ]

          this.$set(this.countDeliverRecord2, 'line_list', series);
        })
    }
  }
};
</script>


